<template>
  <view class="product-card product-description">
    <view class="card-title">{{ $t('product.product_description') }}</view>
    <mp-html
      :content="description"
      :domain="webBaseUrl"
      :tag-style="{img: 'vertical-align: bottom;'}" />
    <!-- <rich-text @itemclick="descriptionItemclick" :nodes="parseHtmlFormat(description)"></rich-text> -->
  </view>
</template>

<script setup>
import parseHtml from "@/common/html-parser.js"
import config from "@/config.js"
import { toRefs, computed } from "vue"

const webBaseUrl = config.webBaseUrl;

const props = defineProps({
  description: {
    type: String,
    default: "",
  },
})

const parseHtmlFormat = (html) => {
  let description = parseHtml(html)
  description.forEach((e) => {
    if (e.children && e.children.length) {
      e.children.forEach((e1) => {
        if (e1.name == "img") {
          ;(e1.attrs.src = config.webBaseUrl + e1.attrs.src), (e1.attrs.style = "max-width:100%;height: auto;vertical-align:middle;")
        }
      })
    }
  })

  return description
}

const descriptionItemclick = (e) => {
  const url = e.detail.node.attrs.src

  uni.previewImage({
    current: 0,
    urls: [url],
  })
}
</script>

<style lang="scss" scoped>
@import "../card-title.scss";
</style>
